<style scoped>
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
</style>
<template>
  <div>
    <Form inline class="form-search">
      <FormItem>
        <Input v-model="keyword" placeholder="客户名称" style="width: 200px" @input="page = 1;
        SearchCustomer();" />
      </FormItem>

      <FormItem>
        <Button type="primary" @click="
  page = 1;
SearchCustomer();
        " icon="md-search">查询</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="AddData" icon="md-add">新增</Button>
      </FormItem>
    </Form>
    <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
      :data="tableData" :height="tableHeight"></Table>
    <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]"
      @on-change="
        (s) => {
          page = s;
          SearchCustomer();
        }
      " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchCustomer();
  }
" show-total show-sizer />
    <Modal :width="600" :footer-hide="true" v-model="modalData" title="新增" :mask-closable="false" draggable sticky>
      <customeredit :Id="tempDataId" v-if="modalData" @on-success="onSuccess"></customeredit>
    </Modal>
  </div>
</template>

<script>
import { SearchCustomer } from '@/api/customer'
import customeredit from './customeredit.vue'
export default {
  components: { customeredit },
  name: 'customerchose',
  data () {
    return {
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 400,
      status: -1,
      keyword: '',
      loadingTable: false,
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.handleChose(params.row)
                  }
                }
              },
              '选择'
            )
          }
        },

        {
          key: 'Name',
          title: '客户姓名',
          width: 200,
          align: 'center'
        },
        {
          key: 'Balance',
          title: '客户账目',
          className: 'demo-table-info-column',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                style: {
                  color: params.row.Balance >= 0 ? '#19be6b' : '#ed4014',
                  fontSize: '18px'
                }

              },
              params.row.Balance
            )
          }
        },
        {
          key: ' ',
          title: ' ',
          align: 'center'
        }

      ],

      tableData: [],
      modalData: false,
      tempDataId: 0
    }
  },
  computed: {},

  methods: {
    onSuccess (res) {
      this.modalData = false

      if (res == 1) {
        this.SearchCustomer()
      }
    },
    handleChose (item) {
      this.$emit('on-success', item)
    },

    SearchCustomer () {
      let vm = this
      vm.loadingTable = true
      var reqData = {
        page: vm.page,
        size: vm.size,
        keyword: vm.keyword
      }
      SearchCustomer(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    AddData () {
      this.tempDataId = 0
      this.modalData = true
    }
  },
  mounted () {
    this.SearchCustomer()
  }
}
</script>

<style>
</style>
